<template>
    <div style="padding-top: 1%;padding-left: 0.5%">
        <div>
            <div class="demo-input-suffix">
                <el-select v-model="region" filterable placeholder="请选择搜索的系列" :filter-method="init">
                    <el-option
                            v-for="item in seriesList"
                            :key="item.number"
                            :label="item.name"
                            :value="item.number">
                    </el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="querySeries()"></el-button>
                <el-button type="primary" @click="init()">显示全部</el-button>
                <el-button type="primary" @click="install()">新增文章</el-button>
            </div>
            <div>
                <el-table :data="tableData" stripe style="text-align: center">
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <el-table-column prop="series" label="系列"></el-table-column>
                    <el-table-column prop="images" label="主图片">
                        <template scope="scope">
                            <el-popover
                                    placement="right"
                                    width="500px"
                                    trigger="hover">
                                <div>
                                    <el-image style="width: 400px; height: 400px" :src="scope.row.images"></el-image>
                                </div>
                                <el-image slot="reference" style="width: 100px; height: 100px" :src="scope.row.images"></el-image>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createDate" label="系列"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="update(scope.row.id)">

                            </el-button>
                            <el-button type="primary" icon="el-icon-view" circle @click="showInfo(scope.row.id)">

                            </el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="remove(scope.row.id)">

                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <el-pagination
                        background
                        layout="prev, pager, next, jumper"
                        :current-page="pageable.page"
                        :total="totalElements"
                        :page-size="pageable.size"
                        @current-change="changePage">
                </el-pagination>
            </div>
        </div>
        <ArticleDialog
                :dialogFormVisible.sync="dialogVisible"
                :disabled="disabled"
                :id="id">
        </ArticleDialog>
    </div>
</template>

<script>
    import {mapActions} from "vuex"
    import tips from "@/assets/script/util/tips";
    import {Pageable} from "@/assets/script/model";
    import message from "@/assets/script/util/message";

    export default {
        components: {
            ArticleDialog: () => import("./components/ArticleDialog")
        },
        name: "List",
        methods: {
            ...mapActions("article", ["APaging", "ARemove"]),
            ...mapActions("series", ["AListAll", "AGetByNumber"]),
            //初始化时执行
            async init() {
                await this.showTable();
                const seriesResult = await this.AListAll();
                if (seriesResult.status === 200) {
                    this.seriesList = seriesResult.data
                } else {
                    await tips.error(seriesResult.message);
                }
            },
            async querySeries() {
                if (this.region === '') {
                    await tips.warn("搜索条件不能为空");
                    return false;
                }
                await this.showTable({'series': this.region})
            },
            async changePage(page) {
                this.pageable.page = page;
                await this.showTable(Object.assign({}, this.pageable, {"series": this.region}))
            },
            async showTable(param) {
                const result = await this.APaging(param);
                if (result.status === 200) {
                    const page = result.data;
                    this.tableData = page.content;
                    this.totalElements = page.totalElements;
                } else {
                    await tips.error(result.message);
                }
            },
            async update(id) {
                this.dialogVisible = true
                this.id = id
                this.disabled = false;
            },
            async showInfo(id) {
                this.dialogVisible = true
                this.id = id
                this.disabled = true;
            },
            async install() {
                this.dialogVisible = true
                this.id = "YuWebStorm"
                this.disabled = false;
            },
            async remove(id) {
                try {
                    await this.$confirm(`此操作将永久删除编号为${id}, 是否继续？`, '警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    });
                    const data = await this.ARemove({id});
                    if (data.status === 200) {
                        message.messageSuccessAlert('删除成功')
                    } else {
                        message.messageErrorAlert('删除失败')
                    }
                    this.$router.go(0)
                } catch (e) {
                    message.messageInfoAlert('已取消删除')
                }
            }
        },
        //绑定数据
        data() {
            return {
                seriesList: [],
                tableData: [],
                input: '',
                formLabelWidth: '80px',
                region: '',
                totalElements: 0,
                pageable: new Pageable(),
                dialogVisible: false,
                disabled: false,
                id: ''
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style scoped>

</style>